<template>
  <div class="setProIntro">
    <el-form label-width="80px">
      <el-form-item label="商品图片(至多5张)" required style="position: relative; padding-top: 2em;">

        <div style="color: red; margin-top: -2em;">
          <span>(商品图片上传尺寸限制750*750px，文件大小不得超过500KB，最多5张)</span>
        </div>

        <resource-manager type="cards" :cards-num="5" :cards-list="defaultImgs" :max-size="512000" dir="goods"
                          @insert-success="insertImgsSuccess"></resource-manager>


      </el-form-item>
      <div style="margin-left: 80px;color: red;font-size: 14px;margin-bottom: 10px;">
        (商品详情建议均使用图片展示，图片推荐宽度750px,总大小不超过1MB)
      </div>
      <el-form-item label="商品详情" required>
        <div>
          <tinymce :height='500' v-model="content" @get-intro="getIntro"></tinymce>
        </div>

      </el-form-item>

    </el-form>
    <div class="editBtn">
      <el-button @click="goNext('pro-info')">上一步</el-button>
      <el-button @click="goNext('pro-params')">下一步</el-button>
    </div>
  </div>
</template>
<script>

  import ResourceManager from '@/components/ResourceManager';
  import Tinymce from '@/components/Tinymce';
  import {host, osshost} from '@/api/util/fetch';

  export default {
    components: {
      'resource-manager': ResourceManager,
      'tinymce': Tinymce,
    },
    props: {
      'isEdit': {
        type: Boolean,
        default: false
      },
      'info': {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data()
    {
      return {
        detail: '',
        content: '',
        picLists: [],
        dialogImageUrl: '',
        dialogVisible: false,
        text: 'Hello World',
        show: true,
        tag: 'h1',
        options: {},
        lastEditPro: 'info',
        nextEditPro: 'proParams',
        imageList: [
          /*{
              url:'',
              }*/
        ],//上传到服务器的是相对路径
        defaultImgs:[], //默认的商品图片
      }
    },
    mounted()
    {
      if (this.isEdit)
      {
        this.renderData()
      }
      else
      {
        if (sessionStorage.getItem('proIntro') !== null)
        {
          this.content = JSON.parse(sessionStorage.getItem('proIntro')).detail;
          this.imageList = JSON.parse(sessionStorage.getItem('proIntro')).imgJson || [];
          this.defaultImgs = this.imageList;
        }

      }

    },
    methods: {
      backToPublish()
      {
        this.$confirm('此操作将丢失编辑的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          clearSession();
          this.isEdit = false;
          this.$router.push({path: '/goods/publish'})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });

      },
      save()
      {
        let next = false;
        if (this.imageList.length == 0)
        {
          this.$message({
            type: 'warning',
            message: '请上传商品图片'
          });
          return
        }
        if (this.content == '<p><br data-mce-bogus="1"></p>' || this.content == '<p><br>""</p>' || this.content == '')
        {
          this.$message({
            type: 'warning',
            message: '请填写商品详情'
          });
          return
        }
        next = true;
        sessionStorage.setItem('proIntro', JSON.stringify({
          imgJson: this.imageList,
          detail: this.content
        }));
      },
      goNext(stepName)
      {
        this.save();
        this.$emit('nextprew', stepName);
      },
      renderData()
      {
        if (JSON.stringify(this.info.introduce) != '{}')
        {
          this.imageList = JSON.parse(this.info.introduce.imgJson);
          this.content = this.info.introduce.detail;

          this.defaultImgs = this.imageList || [];

          sessionStorage.setItem('proIntro', JSON.stringify({
            imgJson: this.imageList,
            detail: this.content
          }));
        }
      },
      insertImgsSuccess(files) //商品图片插入回调
      {
        this.imageList = files;
      },
      getIntro()
      {

      }
    }
  }
</script>

<style lang="less">
  .setProIntro {
    .image-wp {
      float: left;
      position: relative;
      margin-left: 15px;
      width: 100px;
      height: 100px;
      border: 1px dashed #d1dbe5;
      border-radius: 6px;

      .img-wp {
        width: 100%;
        height: 100%;

        > img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .remove-icon {
        position: absolute;
        border-radius: 50%;
        font-size: 20px;
        background: #fff;
        border: 1px solid #8c939d;
        color: #8c939d;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 26px;
        right: -10px;
        top: -10px;
        z-index: 2;

        &:hover {
          color: #20a0ff;
          border-color: #20a0ff;
        }
      }

    }
  }

  .editBtn {
    display: block;
    text-align: center;
    margin-top: 24px;

  }

  .editor-content {
    margin-top: 20px;
  }
</style>
